/* eslint-disable indent */
import React, { useEffect, useState } from 'react';
import ReactJson from 'react-json-view';
import { Alert, message } from 'antd';
import styled from './index.less';
import EditorUtil from '../EditorUtil';

function DoubleInput({ value, onChange }) {
  const initValue = value
    ? JSON.parse(value)
    : {
        url: '',
        methed: '',
        body: {},
        headers: {},
      };
  const [initObj, setInitObj] = useState(initValue);
  const [isClose, setIsClose] = useState(false);
  // 编辑内容
  const editContent = (e) => {
    if (e.namespace.length === 0) {
      if (e.name === 'url') {
        if (typeof e.new_value !== 'string') {
          message.warning('修改失败：url必须为String类型');
          return false;
        }
      }
      if (e.name === 'methed') {
        if (typeof e.new_value !== 'string') {
          message.warning('修改失败：methed必须为String类型');
          return false;
        }
        if (!['GET', 'POST', 'PUT'].includes(e.new_value.toUpperCase())) {
          message.warning('删除失败：methed的值必须为GET、POST或PUT');
          return false;
        }
      }
    }
    setInitObj(e.updated_src);
  };
  // 添加内容
  const addContent = (e) => {
    if (e.name) {
      setInitObj(e.updated_src);
    } else {
      message.warning('添加失败：只能在body、headers中增加属性');
      return false;
    }
  };
  // 删除内容
  const delContent = (e) => {
    if (e.namespace.length === 0) {
      if (e.name === 'url') {
        message.warning('删除失败：url为必须参数不可删除');
        return false;
      }
      if (e.name === 'methed') {
        message.warning('删除失败：methed为必须参数不可删除');
        return false;
      }
      if (e.name === 'body') {
        message.warning('删除失败：body为必须参数不可删除');
        return false;
      }
      if (e.name === 'headers') {
        message.warning('删除失败：headers为必须参数不可删除');
        return false;
      }
    }
    setInitObj(e.updated_src);
  };
  // 保存内容
  const saveInfo = () => {
    if (!initObj.url) {
      message.warning('保存失败：url不能为空');
      return false;
    }
    if (!initObj.methed) {
      message.warning('保存失败：methed不能为空');
      return false;
    }
    onChange(JSON.stringify(initObj));
    setIsClose(true);
  };

  useEffect(() => () => {
    setIsClose(false);
  });

  return (
    <EditorUtil isClose={isClose}>
      <div>
        <span className={styled['descript-text']}>
          使用
          <i>:id</i>
          可用于配置标记已读ID
        </span>
        <ReactJson
          name={false}
          style={{
            height: '300px',
            padding: '2px',
            borderRadius: '3px',
            overflow: 'auto',
          }}
          theme="harmonic"
          src={initObj}
          onEdit={editContent}
          onAdd={addContent}
          onDelete={delContent}
          displayObjectSize={false}
          displayDataTypes={false}
          iconStyle="square"
        />
        <Alert
          showIcon={false}
          description={
            <div className={styled['alert-text']}>
              <div>要编辑值尝试 ctrl/cmd + click 进入编辑模式</div>
              <div>编辑值时尝试 ctrl/cmd + enter 提交更改</div>
            </div>
          }
          banner
        />
        <div className={styled.buttonStyle} onClick={saveInfo}>
          <div>保存</div>
        </div>
      </div>
    </EditorUtil>
  );
}

export default DoubleInput;
